<template>
  <div class="home-container">
    <div class="container">
      <el-container class="el-container-div" style="">
        <el-header>
          <!-- <div class="header-fix">
            <div class="header-container">
              <div class="plateTag">
                <span>{{ projectName }}</span>
              </div>
              <div class="TagRouter" ref="TagRouter">
                <div
                  class="TagRouter-link"
                  v-for="(routerItem, index) in menusRoutes"
                  :key="index"
                  :ref="routerItem.id"
                  @click="UpNavdatedPath(routerItem)"
                >
                  <router-link
                    :to="{
                      name: routerItem.dictValue,
                      query: {
                        id: routerItem.dictCode,
                        title: routerItem.name,
                      },
                    }"
                  >
                    {{ routerItem.name }}
                  </router-link>
                </div>
              </div>
              <div class="searchInfo">
                <div class="demo-input-suffix">
                  <el-input placeholder="请输入内容" v-model="input4">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
                </div>
              </div>

              <el-dropdown>
                <span class="el-dropdown-link">
                  通知<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link :to="{ name: 'ReplyMeMsg' }" target="_blank"
                      >回复我的</router-link
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="{ name: 'SystemMsg' }" target="_blank"
                      >系统通知</router-link
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="{ name: 'ThumbsUpMsg' }" target="_blank"
                      >收到的赞</router-link
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <div class="userMsg">
                <el-dropdown class="user">
                  <el-button type="primary">
                    <el-avatar>
                      <div class="userInfo">
                        <img
                          src="../../../assets/szptImages/images/builderHeader.png"
                          alt=""
                        />
                      </div>
                    </el-avatar>

                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      ><el-button>
                        <router-link
                          :to="{
                            name: 'szptPersonalCenter',
                            query: {
                              id: userData.data.userId,
                            },
                          }"
                          target="_blank"
                          >个人中心</router-link
                        ></el-button
                      ></el-dropdown-item
                    >
                    <el-dropdown-item
                      ><el-button @click="szpt_logout()"
                        >注销登录</el-button
                      ></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div> -->
          <div class="Nav">
            <div style="width: 1300px">
              <el-menu
                :default-active="menuActiveIndex"
                class="el-menu-demo"
                mode="horizontal"
                background-color="rgb(72, 61, 139)"
                text-color="#fff"
                active-text-color="#ffd04b"
                active-background-color="rgb(31, 34, 51)"
              >
                <div class="Nav-container">
                  <div class="header-container">
                    <div class="plateTag">
                      <span>{{ projectName }}</span>
                    </div>
                  </div>
                  <div class="route-container">
                    <el-menu-item
                      :index="routerItem.id.toString()"
                      v-for="(routerItem, index) in menusRoutes"
                      :key="routerItem.id"
                      @click="handleSelect(index)"
                      ><router-link
                        :to="{
                          name: routerItem.dictValue,
                          query: {
                            id: routerItem.dictCode,
                            title: routerItem.name,
                          },
                        }"
                        >{{ routerItem.name }}</router-link
                      ></el-menu-item
                    >
                  </div>

                  <div class="search-message-header">
                    <div class="search-container">
                      <el-input
                        placeholder="请输入内容"
                        v-model="searchData"
                        @keyup.enter.native="search()"
                      >
                        <i
                          slot="prefix"
                          class="el-input__icon el-icon-search"
                          style="cursor: pointer; float: right"
                          @click="search()"
                        ></i>
                      </el-input>
                    </div>
                    <!-- 消息模块 -->
                    <div class="messageInfo">
                      <el-dropdown>
                        <span class="el-dropdown-link">
                          <div class="info-msg">
                            <el-badge
                              :value="infoToatal"
                              :max="99"
                              class="item"
                              :hidden="infoToatal ? false : true"
                              dot-class="info-msg"
                            >
                              消息
                            </el-badge>
                          </div>

                          <!-- ><i class="el-icon-arrow-down el-icon--right"></i> -->
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>
                            <router-link
                              :to="{ name: 'ReplyMeMsg' }"
                              target="_blank"
                              >回复我的
                              <el-badge
                                :value="replyCommentTotal"
                                class="item"
                                :hidden="replyCommentTotal ? false : true"
                              >
                              </el-badge>
                            </router-link>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <router-link
                              :to="{ name: 'ThumbsUpMsg' }"
                              target="_blank"
                              >收到的赞
                              <el-badge
                                :value="likeTotal"
                                class="item"
                                :hidden="likeTotal ? false : true"
                              >
                              </el-badge>
                            </router-link>
                          </el-dropdown-item>
                          <!-- <el-dropdown-item>
                            <router-link
                              :to="{ name: 'SystemMsg' }"
                              target="_blank"
                              >系统通知</router-link
                            >
                          </el-dropdown-item> -->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                    <div class="userMsg">
                      <div>
                        <el-dropdown class="user">
                          <div>
                            <el-avatar>
                              <div class="userInfo">
                                <img
                                  src="../../../assets/szptImages/images/builderHeader.png"
                                  alt=""
                                  v-if="!userData.data.avatar"
                                />
                                <img
                                  :src="userData.data.avatar"
                                  alt=""
                                  v-if="userData.data.avatar"
                                />
                              </div>
                            </el-avatar>
                          </div>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                              ><div>
                                <router-link
                                  :to="{
                                    name: 'szptPersonalCenter',
                                    query: {
                                      id: userData.data.userId,
                                    },
                                  }"
                                  target="_blank"
                                  >个人中心</router-link
                                >
                              </div></el-dropdown-item
                            >
                            <el-dropdown-item
                              ><div @click="szpt_logout()">
                                注销登录
                              </div></el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                  </div>
                </div>
              </el-menu>
            </div>
          </div>
        </el-header>
        <el-main>
          <div class="mid-container">
            <div class="main-container-post">
              <!-- 主体容器部分 -->
              <router-view></router-view>
            </div>
          </div>
        </el-main>
        <el-footer>
          <div class="footer-container">
            <div class="foot">
              <szptFooter></szptFooter>
            </div>
          </div>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import szptHome from "./szptHome";
import szTeacher from "./szTeacher.vue";
import store from "@/store";
import { removeToken } from "@/utils/auth";
import szptFooter from "../../../components/szptPage/szptFooter";
import { getToken } from "../../../utils/auth";
import { getUserMsg } from "@/api/szpt/getUserMsg";
import { getInfoNum } from "@/api/szpt/MsgPage/ReplayMeMsg";
// import { initMenu } from "@/utils/szptUtils/szpt_initMenus.js";
// import { getNavRouterId } from "@/utils/szptUtils/getPostLists.js";
// import { initPageMsg } from "@/utils/szptUtils/upDataMsg.js";
// import dict from '../../../store/modules/dict';
export default {
  name: "szptPlate",
  dicts: ["szpt_nav_status"],
  components: {
    szptHome,
    szTeacher,
    szptFooter,
  },
  data() {
    return {
      plateFormName: this.DataTag.plateName.name,
      activeName: "second",
      searchData: "",
      projectName: "",
      menuActiveIndex: "",
      navIndex: "0",
      options: [],
      value: [],
      userData: {
        data: {
          userId: "",
        },
      },
      list: [],
      loading: false,
      states: [],
      link_focus: false,
      infoToatal: 0,
      replyCommentTotal: 0,
      likeTotal: 0,
    };
  },
  methods: {
    // 获取未读消息
    getInfo() {
      getInfoNum()
        .then((resp) => {
          if (resp.code === 200) {
            this.infoToatal = parseInt(resp.data.total);
            this.replyCommentTotal = parseInt(resp.data.replyCommentTotal);
            this.likeTotal = parseInt(resp.data.likeTotal);
            window.localStorage.setItem("info", JSON.stringify(resp.data));
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取用户数据
    handleClick(index) {
      //  this.navIndex=index.toString();
      console.log(this.navIndex, typeof this.navIndex);
    },
    handleSelect(index) {
      this.menuActiveIndex = index.toString();
      console.log(index);
    },
    search() {
      if (this.searchData) {
        this.$router.push({
          name: "search",
          query: { searchData: this.searchData },
        });
      } else {
        this.$message.warning("搜索内容不能为空!");
      }
      this.searchData = "";
    },
    handleSelect() {},
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    szpt_logout() {
      const that = this;
      this.$modal
        .confirm("您确定注销登录吗？")
        .then(function () {
          if (getToken()) {
            // window.localStorage.removeItem('tokenStr');
            that.$modal.msgSuccess("注销成功！");
            // 移除登录token
            removeToken();
            that.$router.push("/szptLogin");
          } else {
            that.$modal.alertError("系统出了点小错误，请稍后再试！");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    fmtNavdictData() {
      this.getDicts("szpt_nav_status").then((response) => {
        const navData = response.data;
        navData.forEach((navItem) => {
          navItem.id = navItem.dictCode;
          navItem.name = navItem.remark;
          navItem.path = navItem.dictValue;
        });
        this.$store.commit("menus/INIT_MENUS", navData);
        this.getConfigKey("szpt_nav_name").then((response) => {
          this.projectName = response.msg;
        });
      });
    },
  },
  computed: {
    menusRoutes() {
      return this.$store.state.menus.menusRoutes;
    },
    routeTitle() {
      return this.$route.query.title;
    },
  },
  created() {
    getUserMsg("").then((resp) => {
      this.userData = resp.data;
      if (this.userData) {
        window.sessionStorage.setItem(
          "userData",
          JSON.stringify(this.userData)
        );
      }
      // this.$store.dispatch("init_userDataMsg", resp.data);
    });
  },
  mounted() {
    const infoData = window.localStorage.getItem("info");
    if (infoData) {
      this.infoToatal = parseInt(JSON.parse(infoData).total);
      this.replyCommentTotal = parseInt(JSON.parse(infoData).replyCommentTotal);
      this.likeTotal = parseInt(JSON.parse(infoData).likeTotal);
    } else {
      this.infoToatal = 0;
      this.replyCommentTotal = 0;
      this.likeTotal = 0;
    }
    // 通过存储在sessionStorgae中的保存的路由获取导航栏路径
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
    this.fmtNavdictData();
    // 获取用户数据
    this.menuActiveIndex = this.$route.query.id;
    // 循环获取系统消息
    setInterval(() => {
      this.getInfo();
    }, 1000 * 20);
  },
  watch: {
    routeTitle: function (newVal) {
      document.title = newVal;
    },
  },
};
</script>

<style lang="scss">
.home-container {
  width: 100%;
  height: auot;
  display: block;
  justify-content: center;
  .container {
    margin-left: -20px;
    width: 100%;
    display: flex;
    background-color: rgb(247, 248, 252);
    justify-content: center;
    .Nav {
      width: 100%;
      margin-left: -10px;
      position: fixed;
      height: 56px;
      overflow: hidden;
      background-color: rgb(72, 61, 139);
      padding: 0 20px;
      display: flex;
      justify-content: center;
      z-index: 10;
      .Nav-container {
        width: 100%;
        display: flex;
        .header-container {
          width: 18%;
          height: 100%;
          font-size: 24px;
          line-height: 55px;
          text-align: center;
          font-weight: bold;
          padding: 0 30px;
          color: rgb(247, 248, 252);
        }
        .route-container {
          width: 50%;
          display: flex;
        }
        .search-message-header {
          width: 32%;
          float: right;
          display: flex;
          justify-content: flex-end;

          .search-container {
            width: 200px;
            height: 56px;
            margin-left: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .messageInfo {
            min-width: 60px;
            padding: 0 20px;
            height: 56px;
            line-height: 56px;
            color: aliceblue;
            margin-left: 20px;
            cursor: pointer;
          }
          .messageInfo:hover {
            background-color: rgb(71, 74, 88);
          }
          .userMsg {
            padding: 0 10px;
            margin-left: 20px;
            display: flex;
            justify-content: flex-end;
            .user {
              float: left;
              margin-top: 8px;
              .userInfo {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }
      .el-menu-item:hover {
        background-color: rgb(58, 41, 173) !important;
      }
      .el-menu-item.is-active {
        // background-color: rgb(71, 74, 88) !important;
        font-weight: bold !important;
        border-bottom: 3px solid #ffd04b !important;
      }
    }
  }
  .mid-container {
    display: flex;
    justify-content: center;

    .main-container-post {
      width: 1100px;
      min-height: 600px;
      height: auto;
      background-color: rgb(247, 248, 252);
      padding-left: 20px;
      overflow: scroll;
      justify-content: center;
    }
  }
  .footer-container {
    width: 100%;
    height: auto;
    display: flex;
    background-color: rgb(72, 61, 139);
    justify-content: center;
    .foot {
      width: 1300px;
      height: auto;
    }
  }
}
.el-menu-item a {
  display: block;
  float: left;
  width: 100%;
}
.el-menu-item.is-active {
  // background-color: rgb(71, 74, 88) !important;
  font-weight: bold !important;
  //border-bottom: 3px solid #ffd04b !important;
}
.info-msg {
  color: white;
}
</style>
